{include file="header/index" /}
<!--//laypage翻页需要 start-->
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script type="text/javascript" src="__JS__/laypage/laypage.js"></script>
<script type="text/javascript" src="__JS__/laytpl/laytpl.js"></script>
<script type="text/javascript" src="__JS__/info.js"></script>
<link rel="stylesheet" href="__CSS__/laypage.css" />
<!--//laypage翻页需要 end-->

<meta charset="UTF-8">
<style>
    .form-control {
        height: 33px;
    }
</style>

<body>
<div class="container privilegeUserList pb40">
    <div class="addUser">
        <form class="form-inline mt15 mb15" action="{:url('Parts/index')}" method="post">
            <div class="btn btn-default input-Btn mr20" data-toggle="modal" data-target="#add">添加配件</div>
            <div class="btn btn-default input-Btn mr20" data-toggle="modal" data-target="#type">添加分类</div>
            <div class="btn btn-default input-Btn mr20" data-toggle="modal1" data-target="#type1" onclick="parts()">配件管理</div>
            <div class="form-group mr20">
                <input type="text"  name="key" id="key" class="form-control input-max" placeholder="输入需要查询的配件名" value="">
            </div>
            <button class="btn btn-primary input-Btn">搜索</button>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>配件分类名称</th>
                <th>操　　作</th>
            </tr>
            </thead>
            <script id="list-template" type="text/html">
                <tr>
                    {{# for(var i=0;i<d.length;i++){  }}
                    <td>{{d[i].name}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs"  onclick="update({{d[i].id}});"> <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
                        <a href="javascript:;" onclick="roleDel(this,{{d[i].id}})" class="btn btn-danger btn-xs"> <i class="fa fa-trash-o"></i> 删除</a>
                    </td>
                </tr>{{# } }}
            </script>
            <tbody id="list-content"></tbody>
        </table>
    </div>
    <div class="clearfix" style="float:right;margin: 0 auto;">
        <span class="fl mr20 mt5">共{$count}条数据</span><span id="allpage"  class="fl  mr20 mt5"></span><span  class="fl" id="AjaxPage"></span>
    </div>
    <!-- 加载动画 -->
    <div class="spiner-example">
        <div class="sk-spinner sk-spinner-three-bounce">
            <div class="sk-bounce1"></div>
            <div class="sk-bounce2"></div>
            <div class="sk-bounce3"></div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加配件</h4>
            </div>
            <form class="form-horizontal" id="form_add" method="post" action="#" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">配件名称：</label>
                        <div class="input-group col-sm-4">
                            <input type="text" class="form-control" name="parts_name" placeholder="输入配件名称" required="required">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">配件金额：</label>
                        <div class="input-group col-sm-4">
                            <input type="text" class="form-control" name="parts_money" placeholder="输入配件金额" required="required">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">配件分类：</label>
                        <select name="type_id" class="form-control col-sm-4 input-max mt5">
                            <option value="">请选择配件分类</option>
                            {volist name="tlist" id="k"}
                            <option value="{$k.id}">{$k.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状&nbsp;态：</label>
                        <div class="col-sm-6">
                            <div class="switchery-radio" style="padding-top: 8px;">
                                <input type="checkbox" name="is_delete" value="0" class="js-switch" checked>
                                默认开启
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="add()">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加分类</h4>
            </div>
            <form class="form-horizontal" id="form_type" method="post" action="#" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">分类名称：</label>
                        <div class="input-group col-sm-4">
                            <input type="text" class="form-control" name="name" placeholder="请输入分类名称" required="required">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-6">
                            <textarea type="text" class="form-control" placeholder="请输入备注，非必填" name="note"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="typAdd()">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>



</body>

<script>

    //laypage分页
    Ajaxpage();
    function Ajaxpage(curr){
        var key=$('#key').val();
        $.getJSON('{:url("Partsinfo/index")}', {page: curr || 1,key:key}, function(data){
            $(".spiner-example").css('display','none'); //数据加载完关闭动画
            if(data==''){
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            }else{
                var tpl = document.getElementById('list-template').innerHTML;
                laytpl(tpl).render(data, function(html){
                    document.getElementById('list-content').innerHTML = html;
                });
                laypage({
                    cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
                    pages:'{$allPage}',//总页数
                    skip: true,//是否开启跳页
                    skin: '#1AB5B7',//分页组件颜色
                    curr: curr || 1,
                    groups: 3,//连续显示分页数
                    jump: function(obj, first){
                        if(!first){
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
                    }
                });
            }
        });
    }
    //删除
    function roleDel(obj,id) {
        layer.alert('确认删除此分类吗?', {
            btn: ['确认', '取消'], //按钮

        }, function() {
            $.getJSON("{:url('Partsinfo/remove')}",{id:id},function(data){
                if (data.status == 1) {
                    layer.msg(data.message, {icon: 1});
                    Ajaxpage(1);
                }else{
                    layer.msg(data.message, {icon: 2});
                    Ajaxpage(1);
                }
            });
        });
    }
    //添加
    function add() {
        $.post("{:url('Parts/add')}",$('#form_add').serialize(),function(e){
            if(e.code == '1'){
                $('#edit+naturalnumbers').hide();
                layer.open({content: e.msg,time: 2000});
                setTimeout(function () {
                    location.reload();
                },800)
            }else{
                layer.open({content: e.msg,time: 2000});
            }
        },'json');
    }
    function typAdd(){
        $.post("{:url('Parts/typeAdd')}",$('#form_type').serialize(),function(e){
            if(e.code == '1'){
                $('#edit+naturalnumbers').hide();
                layer.open({content: e.msg,time: 2000});
                setTimeout(function () {
                    location.reload();
                },800)
            }else{
                layer.open({content: e.msg,time: 2000});
            }
        },'json');
    }
    //更新
    function update(id) {
        location.href="{:url('update')}?id="+id;
    }

    // 配件管理
    function parts(){
        location.href="{:url('/admin/parts/index')}";
    }



</script>

</html>